<template>
	<view class="order-container">
		<u-tabs :list="list" @click="changeStatus" />
		<view class="order-content">
			<u-loading-page :loading="isLoading" loading-text="加载中..." loading-mode="semicircle" />
			<view v-if="!orderList.length" class="no-orders">
				<image src="https://www.taotaohomecraft.press/prod-api/profile/non_order.png" alt="暂无订单"
					class="no-orders-image" />
				<text class="no-orders-text">暂无订单</text>
			</view>
			<view v-for="(item, index) in orderList" :key="item.id" class="order-item">
				<view class="order-header">
					<text class="order-id">订单编号：{{ item.id }}</text>
					<text class="order-status">{{ getStatusText(item.status) }}</text>
				</view>
				<view class="order-body" @click="handleOrderDetail(item.id)">
					<view v-if="item.goodsList.length === 1" class="single-item">
						<image :src="item.goodsList[0].photoList[0]" class="single-item-image" />
						<view class="single-item-info">
							<text class="item-name">{{ item.goodsList[0].name }}</text>
							<text class="item-price">金额：￥{{ item.goodsList[0].price }}</text>
							<text class="item-quantity">数量：{{ item.goodsList[0].buyNum }}</text>
						</view>
					</view>
					<view v-else class="multiple-items" @click="handleOrderDetail(item.id)">
						<view class="item" v-for="(goods, idx) in item.goodsList.slice(0, 3)" :key="goods.id">
							<image :src="goods.photoList[0]" class="item-image" />
							<!-- <text class="item-quantity">x{{ goods.quantity }}</text> -->
						</view>
					</view>
					<view class="order-summary">
						<text class="total-items">共 {{ item.goodsList.length }} 件商品</text>
						<text class="total-price">实付款：￥{{ item.totalAmount }}</text>
					</view>
				</view>
				<view class="order-actions">
					<u-button v-if="item.status === '0' || item.status === '2'" type="primary" color="red" text="确认收货"
						size="small" @click="handleOpenShow(item.id, '3', '是否确认收货？')" />
				</view>
			</view>
		</view>
		<u-modal :content="content" :show="show" showCancelButton closeOnClickOverlay @confirm="confirmReturnBook"
			@cancel="cancelShow" @close="cancelShow" />
	</view>
</template>

<script>
	import {
		goodsOrderList,
		updateGoodsStatus
	} from "@/api/order.js";

	export default {
		data() {
			return {
				content: "",
				orderId: "",
				show: false,
				list: [{
						name: "全部",
						value: "999"
					},
					{
						name: "待取货",
						value: "0"
					},
					{
						name: "待配送",
						value: "1"
					},
					{
						name: "配送中",
						value: "2"
					},
					{
						name: "已完成",
						value: "3"
					},
					{
						name: "待付款",
						value: "4"
					},
					{
						name: "已取消",
						value: "5"
					},
				],
				isLoading: false,
				status: "999",
				orderList: [],
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {
			async getList() {
				this.isLoading = true;
				const res = await goodsOrderList(this.status);
				if (res.code === 200) {
					this.orderList = res.rows;
				}
				this.isLoading = false;
			},
			changeStatus(index) {
				this.status = index.value;
				this.getList();
			},
			handleOpenShow(id, status, content) {
				this.orderId = id;
				this.show = true;
				this.content = content;
				this.status = status;
			},
			cancelShow() {
				this.show = false;
			},
			async confirmReturnBook() {
				const res = await updateGoodsStatus(this.status, this.orderId);
				if (res.code === 200) {
					uni.showToast({
						title: "操作成功"
					});
					this.show = false;
					this.status = "999";
					this.getList();
				}
			},
			handleOrderDetail(orderId) {
				uni.navigateTo({
					url: `/order/goodsOrderDetail/index?orderId=${orderId}`,
				});
			},
			getStatusText(status) {
				const statusMap = {
					"0": "待取货",
					"1": "待配送",
					"2": "配送中",
					"3": "已完成",
					"4": "待付款",
					"5": "已取消",
				};
				return statusMap[status] || "未知状态";
			},
		},
	};
</script>

<style lang="scss">
	.order-container {
		position: relative;
		height: 100vh;
		width: 100%;
		background-color: #f8f9fa;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-content {
		width: 95%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px 0;
	}

	.no-orders {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30px;
	}

	.no-orders-image {
		width: 180px;
		height: 180px;
		opacity: 0.8;
	}

	.no-orders-text {
		font-size: 18px;
		color: #888;
		margin-top: 20px;
		font-weight: 500;
	}

	.order-item {
		margin-top: 20px;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		width: 100%;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.order-item:hover {
		transform: translateY(-8px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	}

	.order-header {
		padding: 15px 20px;
		display: flex;
		justify-content: space-between;
		background-color: #f1f3f5;
		border-bottom: 1px solid #e9ecef;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
	}

	.order-id {
		font-size: 14px;
		color: #495057;
	}

	.order-status {
		font-size: 14px;
		color: #ff6b6b;
		font-weight: bold;
	}

	.order-body {
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.single-item {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.single-item-image {
		width: 90px;
		height: 90px;
		border-radius: 10px;
		object-fit: cover;
		border: 1px solid #dee2e6;
	}

	.single-item-info {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.item-name {
		font-size: 16px;
		color: #212529;
		font-weight: bold;
	}

	.item-price,
	.item-quantity {
		font-size: 14px;
		color: #495057;
	}

	.multiple-items {
		display: flex;
		gap: 15px;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.item-image {
		width: 70px;
		height: 70px;
		border-radius: 8px;
		object-fit: cover;
		border: 1px solid #dee2e6;
	}

	.item-quantity {
		font-size: 13px;
		color: #868e96;
		margin-top: 5px;
	}

	.order-summary {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		font-size: 15px;
		color: #212529;
		font-weight: bold;
	}

	.order-actions {
		display: flex;
		flex-direction: row;
		// justify-content: flex-end;
		margin-left: 80%;
		align-items: center;
		gap: 10px;
		width: 50rpx;
		padding: 15px 20px;
		border-top: 1px solid #e9ecef;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
	}

	u-button {
		border-radius: 20px;
		font-size: 14px;
		padding: 5px 15px;
	}
</style>